<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Carousel</title>
    <style>
        .carousel {
            width: 500px;
            height: 300px;
            white-space: nowrap;
            overflow: hidden;
            outline: 1px #4e6ef2 solid;
            margin: 30px auto;
        }

        .carousel>img {
            width: 500px;
            height: 300px;
            display: inline-block;
            transition: transform ease 0.5s;
        }

    </style>
</head>
<body>

<div id="container"></div>
<script>

    class Carousel {
        constructor(){
            this.root = null;
            this.data = null;
        }

        render() {
            this.root = document.createElement("div");
            this.root.classList.add('carousel');

            const fragments = document.createDocumentFragment();
            for (let d of this.data) {
                const element = document.createElement('img');
                element.src = d;
                element.addEventListener("dragstart", event => event.preventDefault())
                fragments.appendChild(element)
            }
            this.root.appendChild(fragments);
            let position = 0;

            const nextPic = () => {
                let nextPosition = (position + 1) % this.data.length;

                let current = this.root.childNodes[position];
                let next = this.root.childNodes[nextPosition];

                current.style.transition = 'ease 0s';
                next.style.transition = 'ease 0s';

                current.style.transform = `translateX(${ -100 * position}%)`;
                next.style.transform = `translateX(${100 -100 * nextPosition}%)`;


                /*window.requestAnimationFrame(function(){
                    window.requestAnimationFrame(function(){
                        current.style.transition = 'ease 2s';
                        next.style.transition = 'ease 2s';

                        current.style.transform = `translateX(${ -100 -100 * position}%)`;
                        next.style.transform = `translateX(${-100 * nextPosition}%)`;
                        position = nextPosition;
                    })
                })*/

                setTimeout(()=> {
                    current.style.transition = '';
                    next.style.transition = '';

                    current.style.transform = `translateX(${ -100 -100 * position}%)`;
                    next.style.transform = `translateX(${-100 * nextPosition}%)`;
                    position = nextPosition;
                },16);

                setTimeout(nextPic, 3000);
            }

            setTimeout(nextPic, 3000);

            this.root.addEventListener("mousedown", event=> {
                console.log(event)
                let startX = event.clientX;

                const len = this.data.length;  //长度

                let lastPosition = (position - 1 + len) % len;
                let nextPosition = (position + 1) % len;

                let current = this.root.childNodes[position];
                let next = this.root.childNodes[nextPosition];
                let last = this.root.childNodes[lastPosition];

                current.style.transition = "ease 0s";
                next.style.transition = "ease 0s";
                last.style.transition = "ease 0s";

                current.style.transform = `translateX(${ - 500 * position }px)`;
                next.style.transform = `translateX(${ 500 - 500 * nextPosition }px)`;
                last.style.transform = `translateX(${ - 500 - 500 * lastPosition }px)`;


                let move = event => {

                    current.style.transform = `translateX(${ event.clientX - startX  - 500 * position }px)`;
                    next.style.transform = `translateX(${ event.clientX - startX + 500 - 500 * nextPosition }px)`;
                    last.style.transform = `translateX(${ event.clientX - startX - 500 - 500 * lastPosition }px)`;

                }

                let up = event => {

                    let offset = 0;

                    let distant = event.clientX - startX; //偏移量

                    if (distant > 250) {
                        offset = 1;
                    } else if(distant < -250) {
                        offset = -1;
                    }

                    current.style.transition = "";
                    next.style.transition = "";
                    last.style.transition = "";

                    current.style.transform = `translateX(${ offset * 500 - 500 * position }px)`;
                    next.style.transform = `translateX(${ offset * 500 + 500 - 500 * nextPosition }px)`;
                    last.style.transform = `translateX(${offset * 500 - 500 - 500 * lastPosition }px)`;

                    position = (position - offset + this.data.length ) % this.data.length;

                    document.removeEventListener("mousemove", move);
                    document.removeEventListener("mouseup", up);
                }

                document.addEventListener("mousemove", move);
                document.addEventListener("mouseup", up);
            })

        }


    }

    let carousel = new Carousel();
    carousel.data = ['./img/1.png','./img/2.png','./img/3.png','./img/4.png','./img/5.png'];
    carousel.render();
    document.getElementById('container').appendChild(carousel.root);


</script>

</body>
</html>